<template>
  <div 
    class="desktop-icon"
    :style="{ left: icon.position.x + 'px', top: icon.position.y + 'px' }"
    @click="$emit('click')"
  >
    <img :src="getIconSrc(icon.icon)" :alt="icon.name">
    <span class="icon-name">{{ icon.name }}</span>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  icon: {
    type: Object,
    required: true
  }
})

const getIconSrc = (iconName) => {
  return new URL(`../assets/icons/${iconName}`, import.meta.url).href
}
</script>

<style lang="scss" scoped>
.desktop-icon {
  position: absolute;
  width: 80px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  
  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  img {
    width: 48px;
    height: 48px;
    margin-bottom: 5px;
  }
  
  .icon-name {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-size: 12px;
    text-align: center;
    word-break: break-word;
  }
}
</style> 